import Vue from 'vue'
import store from '@/store'
import router from '@/router'

// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
export const buttonPermissions = Vue.directive('btn-perm', {
  /**
   * inserted：被绑定元素插入父节点时调用
   * el：指令所绑定的元素，可以用来直接操作 DOM
   * binding.value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
   */
  inserted(el, binding) {
    const perms = store.getters && store.getters.perms
    // const pagePerm = store.getters && store.getters.pagePerm

    const newV = router.currentRoute
    const pagePerm = newV.meta && newV.meta.perms ? newV.meta.perms : getParentPermsFunc(newV)

    const buttonKey = binding.value
    // 代表某个元素需要通过权限验证
    if (buttonKey && pagePerm[buttonKey]) {
      const key = checkKey(buttonKey, perms, pagePerm)
      if (!key) { // 没有权限
        el.remove() // 删除按钮
      }
    } else {
      el.remove() // 删除按钮
      throw new Error(`当前路由 ${newV.name} 的按钮 ${buttonKey} 权限配置为空或者未在路由meta下的perms中定义，请检查配置！`)
    }
  }
})

// 检测传入的元素key是否可以显示
function checkKey(key, perms, pagePerm) {
  // 如果传入的元素key不在权限数组里，则不可显示
  return perms.includes(pagePerm[key]) || perms.includes(pagePerm[key].toLowerCase())
}

function getParentPermsFunc(newV) {
  let v = null
  if (newV.matched && newV.matched.length > 2) {
    const len = newV.matched.length
    v = newV.matched[len - 2].meta && newV.matched[len - 2].meta.perms ? newV.matched[len - 2].meta.perms : null
  }
  return v
}
